<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
	<script type="text/javascript" src="/movies/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
	/*
		登陆页面的功能
			1.注册按钮，点击跳转注册页面
			2.用户名填写，不能为空
			3.密码填写，不能为空
			4.验证码填写，后台验证
			5.点击登录按钮。所有数据均填写，验证码正确后，发送后台与数据库比对，若全部争取即登陆成功
				否则清空所有input信息，重新输入
			6.cookie保存用户账号密码7天	
	*/
		$(function () {
			
			//验证码点击事件，点击更换验证码
			$("#veriCode").click(function () { 
				var v = Math.random();
				$("#veriCode").attr("src", "/movies/UserServlet?action=veriCodeServlet&x="+v);
			})
			$("#codeText").blur(yanzhengma)
			$("#usernameid").blur(yonghuming)
			$("#userpassid").blur(mima)
			//表单提交事件，检查用户名密码是否输入，第一遍检查验证码是否正确
			$("#myform").submit(function () {
				if(yanzhengma() && yonghuming() && mima()){
					return true;
				}			 
				return false;
			})
			 
		})
		//检查验证码格式和正确
		function yanzhengma() {
			var flag = false;
			if ($("#codeText").val()=="") {
				$("#sp").css("display", "block"); 
				$("#sp").html("验证码错误");
				$("#sp").css("color", "red");
				 return false;
			}
			if ($("#codeText").val().trim().length != 4) {
				$("#sp").css("display", "block"); 
				$("#sp").html("验证码错误");
				$("#sp").css("color", "red");
				 return false;
			}
			$.ajax({
				url:"/movies/UserServlet?action=checkVeriCodeServlet",
				type:"post",
				async:false,
				data:"codeText="+ $("#codeText").val().trim(),
				success:function(mes){ 
					if(mes == "true"){
						$("#sp").css("display", "block"); 
						$("#sp").css("float", "left"); 
						$("#sp").html("验证码正确");
						$("#sp").css("color", "green");
						flag = true;
					}else{
						$("#sp").css("display", "block"); 
						$("#sp").html("验证码错误");
						$("#sp").css("color", "red");
					}
				}
			})
			
			return flag;
		}
		//检查用户名是否输入
		function yonghuming() {
			if ($("#usernameid").val()=="") {//字符串去掉最前和最后的空格
				$("#usernamesp").css("display", "block"); 
				$("#usernamesp").html("用户名不能为空");
				$("#usernamesp").css("color", "red");
				return false;
			}
			$("#usernamesp").css("display", "none"); 
			return true;
		}
		//检查密码是否输入
		function mima() {
			if ($("#userpassid").val()=="") {
				$("#userpasssp").css("display", "block"); 
 				$("#userpasssp").html("密码不能为空");
				$("#userpasssp").css("color", "red");
				return false;
			}
			$("#userpasssp").css("display", "none"); 
			return true;
		}
	</script>
	<style type="text/css">
		body {
			background-image: url('/movies/images/denglu.jpg');
			background-size: 130%;
		}
		#background{
			width: 350px;
			height: 550px;
			border-radius: 20px; 
            margin: 50px 900px;
            padding: 50px;
            background: rgba(242,242,242,0.9); 
		}
		#title {
            font-size: 35px;
            font-weight: 600;
        }
        #panel input{
            border: 1px solid #ddd;
            width: 350px;
            height: 40px;
            background: #fff;
            border-radius: 4px; 
        }
        #panel #codeText{
        	width: 230px;
        }
        #panel #veriCode{
        	vertical-align: middle;
        }
        #panel #denglu{
        	height: 40px;
        	background-color: lightblue;
        	color: white;
        	border-radius: 50px;
        	font-size: 20px;
        	font-weight: 600;
        }
        #panel #usernamesp,#userpasssp,#sp{
        	display: none;
        	float: left;
        }
        #panel #remdiv{
         	height:20px;
        	margin-left:160px;
        	overflow: hidden;
        	
        }
        #panel #checkbox{
        	width: 15px;
        	float:left;
        	margin-top: -10px;
        	 
        }
        #panel #remember{
       	    margin-left:70px;
       	    float: left;
        }	 
       
	</style>
	
</head>
<body  >
	<%
		Cookie[] cookies = request.getCookies();
		String username="";
		String userpass="";
		for(Cookie c: cookies){
			if("username".equals(c.getName())){
				username = c.getValue();
			}
			if("userpassword".equals(c.getName())){
				userpass = c.getValue();
			}
		}
	%>
	<div id="background">
		<div id="title">
           		 欢迎登录     
    	</div> 
    	<p>没有帐号？<a href="<%=request.getContextPath()%>/registerpage.jsp">注册</a></p>
		<form action="/movies/UserServlet?action=checkIDServlet" method="post" id="myform">
		
		<div id="panel" >
			<%
				if("1".equals(request.getParameter("errmes"))){
					%>
					<span id="errmesspan">请输入正确的账号和密码</span><br>
					<%		
				}
					
			%>
			<br><br>
			<div class="wrapper">
				<div class="input-data">
				<label for="usernameid">用户名</label>
					<input type="text" name="username" id="usernameid" value="<%=username %>">
						<a id="usernamesp">用户名错误</a>
					
					
				</div>
			</div>
			<br>
			<br>
			<div class="wrapper">
				<div class="input-data">
				<label for="usernameid">密&emsp;码</label>
					<input type="password" name="userpass" id="userpassid" value="<%=userpass%>"> 
					<span id="userpasssp">密码错误</span>
					<div id="remdiv"> 
						<a id="remember">记住账号密码</a><input type="checkbox" name="checkbox" id="checkbox">
					</div>
				</div>
			</div>
			
			<br>
			<div class="wrapper">
				<div class="input-data">
				<label for="usernameid">验证码</label>
				<br>
				
				<input type="text" id="codeText" name="codeimg"> 
				<img id="veriCode" src="/movies/UserServlet?action=veriCodeServlet">
				<span id="sp">验证码错误</span>
				</div>
			</div>
			<br>
			<br>
			<br>
			<div class="wrapper">
				<div class="input-data"> 
					<input id="denglu"  type="submit" value="登录">
					
				</div>
			</div>
		</div>
	
	</form>
	</div>
</body>
</html>